<template>

  <div>
    <el-alert
      style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
      :closable="false" title="工资账套管理"/>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="searchForm.name" placeholder="名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="search">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-right" @click="resetSearchForm">重置</el-button>
      </el-form-item>
      <el-button style="margin-left: 25px" type="primary" @click="dialogFormVisible = true"><i
        class="el-icon-circle-plus-outline"></i>添加工资账套
      </el-button>
    </el-form>
    <el-divider></el-divider>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="editForm" :rules="rules" ref="addForm">
        <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="基本工资" prop="basicSalary" :label-width="formLabelWidth">
          <el-input v-model="editForm.basicSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="奖金" prop="bonus" :label-width="formLabelWidth">
          <el-input v-model="editForm.bonus" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="午餐补助" prop="lunchSalary" :label-width="formLabelWidth">
          <el-input v-model="editForm.lunchSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="交通补助" prop="trafficSalary" :label-width="formLabelWidth">
          <el-input v-model="editForm.trafficSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="应发工资" prop="allSalary" :label-width="formLabelWidth">
          <el-input v-model="editForm.allSalary" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="养老金基数" prop="pensionBase" :label-width="formLabelWidth">
          <el-input v-model="editForm.pensionBase" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="养老金比例" prop="pensionPer" :label-width="formLabelWidth">
          <el-input v-model="editForm.pensionPer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="医疗基数" prop="medicalBase" :label-width="formLabelWidth">
          <el-input v-model="editForm.medicalBase" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="医疗比例" prop="medicalPer" :label-width="formLabelWidth">
          <el-input v-model="editForm.medicalPer" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="社保基数" prop="accumulationFundBase" :label-width="formLabelWidth">
          <el-input v-model="editForm.accumulationFundBase" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="社保比例" prop="accumulationFundPer" :label-width="formLabelWidth">
          <el-input v-model="editForm.accumulationFundPer" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    <div class="table">-->
    <el-table class="content" tooltip-effect="dark" border
              :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)">
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="basicSalary" label="基本工资"/>
      <el-table-column prop="bonus" label="奖金"/>
      <el-table-column prop="lunchSalary" label="午餐补助"/>
      <el-table-column prop="trafficSalary" label="交通补助"/>
      <el-table-column prop="allSalary" label="应发工资"/>
      <el-table-column prop="pensionBase" label="养老金基数"/>
      <el-table-column prop="pensionPer" label="养老金比例"/>
      <el-table-column prop="medicalBase" label="医疗基数"/>
      <el-table-column prop="medicalPer" label="医疗比例"/>
      <el-table-column prop="accumulationFundBase" label="公积金基数"/>
      <el-table-column prop="accumulationFundPer" label="公积金比例"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column prop="updateBy" label="修改人"/>
      <el-table-column prop="updateTime" label="更新时间"/>
      <el-table-column
        fixed="right"
        label="操作"
        width="150px">
        <template slot-scope="scope">
          <el-button type="text" @click="editHandle(scope.row.id)">编辑</el-button>
          <el-divider direction="vertical"></el-divider>
          <template>
            <el-popconfirm
              title="这是一段内容确定删除吗？"
              @confirm="deleteFactory(scope.row)"
            >
              <el-button slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="align-content: center; align-items: center; margin-left: 15px"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :total="totalCount"
      :page-size="PageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
  <!--  </div>-->
</template>

<script>
import { validatePhone, isIntegerNotMust, isDecimal } from '@/utils/validator'

export default {
  name: 'salary',
  data() {
    return {
      dialogFormVisible: false,
      updateForm: false,
      //添加表单的数据
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      PageSize: 10,
      editForm: {},
      rules: {
        name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        basicSalary: [{ required: true, message: '基本工资不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '基本工资为正整数', trigger: 'blur' }],
        bonus: [{ required: true, message: '奖金不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '奖金为正整数', trigger: 'blur' }],
        lunchSalary: [{ required: true, message: '午餐补助不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '午餐补助为正整数', trigger: 'blur' }],
        trafficSalary: [{ required: true, message: '交通补助不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '交通补助为正整数', trigger: 'blur' }],
        allSalary: [{ required: true, message: '应发工资不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '应发工资为正整数', trigger: 'blur' }],
        pensionBase: [{ required: true, message: '养老金基数不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '养老金基数为正整数', trigger: 'blur' }],
        pensionPer: [{ required: true, message: '养老金比例不能为空', trigger: 'blur' },
          { validator : isDecimal, message: '养老金比例为为(0,1)之间小数', trigger: 'blur' }],
        medicalBase: [{ required: true, message: '医疗基数不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '医疗基数为正整数', trigger: 'blur' }],
        medicalPer: [{ required: true, message: '医疗比例不能为空', trigger: 'blur' },
          { validator : isDecimal, message: '医疗比例为为(0,1)之间小数', trigger: 'blur' }],
        accumulationFundBase: [{ required: true, message: '公积金基数不能为空', trigger: 'blur' },
          { validator : isIntegerNotMust, message: '公积金基数为正整数', trigger: 'blur' }],
        accumulationFundPer: [{ required: true, message: '公积金比例不能为空', trigger: 'blur' },
          { validator : isDecimal, message: '公积金比例为为(0,1)之间小数', trigger: 'blur' }],
      },
      searchForm: {},
      formLabelWidth: '120px'
    }
  },

  mounted() {
    this.load()
  },

  methods: {
    editHandle(id) {
      this.axios.get('/salary/info/' + id).then(res => {
        this.editForm = res.data
        this.dialogFormVisible = true
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.editForm)
        if (valid) {
          this.axios.post('/salary/' + (this.editForm.id ? 'update' : 'add'), this.editForm).then(resp => {
            if (resp.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                onClose: () => { //关闭回调
                }
              })
              this.load()
              this.dialogFormVisible = false
              this.editForm = {}
            }
          })
        }
      })
    },
    deleteFactory(row) {
      this.axios.get('/salary/delete/' + row.id).then(
        (resp) => {
          this.load()
        }
      )
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    search() {
      this.axios.post('/salary/select', this.searchForm).then((resp) => {
          this.tableData = resp.data
          this.totalCount = resp.data.length
        }
      )
    },
    resetSearchForm() {
      this.searchForm = {}
      this.load()
    },
    load() {
      this.axios.post('/salary/select', {}).then((resp) => {
          this.tableData = resp.data
          this.totalCount = resp.data.length
        }
      )
    }
  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
